<template>
  <el-dialog title="自定义表头" :visible.sync="dialogVisible" width="50%" :close-on-click-modal="false" :before-close="close">
    <el-table ref="multipleTable" :data="tableData" :border="true" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="name" label="全选"></el-table-column>
    </el-table>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button :loading="loadingSubmit" type="primary" @click="determineHandler">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import dialogEditMixin from '@/mixins/dialogEdit'
  export default {
    mixins: [dialogEditMixin],
    data() {
      return {
        // 总字段
        tableData: [
          // { name: '全选' },
          { name: '员工编码' },
          { name: '员工姓名' },
          { name: '性别' },
          { name: '生日' },
          { name: '身份证号' },
          { name: '手机号' },
          { name: '邮箱' },
          { name: '地址' },
          { name: '照片' },
          { name: '部门' },
          { name: '职位' },
          { name: '工种' },
          { name: 'RFID卡' },
          { name: '门禁ID' },
          { name: '工作状态' },
          { name: '人脸识别' },
          { name: '门禁启用/禁用' },
          { name: '备注' },
          { name: '操作' }
        ],
        // 保存选中的字段
        dataList: [],
        // 总列表表头
        tableList: [
          { type: "selection" },
          { prop: "employeeCode", label: "员工编码", align: "center", minWidth: '120px' },
          { prop: "name", label: "员工姓名", align: "center", minWidth: '80px' },
          {
            prop: "sex",
            label: "性别",
            align: "center",
            minWidth: '54px',
            formatter(row, col, cell) {
              let sex,
                sexList = [
                  { label: "男", value: 1 },
                  { label: "女", value: 0 },
                ]
              sexList.forEach((item) => {
                if (item.value == cell) {
                  sex = item.label
                }
              })
              return sex
            },
          },
          {
            prop: 'birthday', label: '生日', align: 'center', minWidth: '96px',
            formatter(row, col, cell) {
              let date = new Date(cell)
              let year = date.getFullYear()
              let month = date.getMonth() + 1
              month = month >= 10 ? month : '0' + month
              let d1 = date.getDate()
              d1 = d1 >= 10 ? d1 : '0' + d1
              let time_str = year + '-' + month + '-' + d1
              return cell ? time_str : '--'
            }
          },
          { prop: "idCard", label: "身份证号", align: "center", minWidth: '166px' },
          { prop: "phone", label: "手机号", align: "center", minWidth: '110px' },
          { prop: "email", label: "邮箱", align: "center", minWidth: '180px' },
          { prop: "adress", label: "地址", align: "center", minWidth: '200px' },
          {
            prop: "photo",
            label: "照片",
            custom: "col2",
            minWidth: "80px",
            align: "center",
          },
          {
            prop: "departmentId",
            label: "部门",
            minWidth: '80px',
            align: "center",
            formatter(row, col, cell) {
              return row.department ? row.department.deptName : "--"
            },
          },
          {
            prop: "jobId",
            label: "职位",
            minWidth: '80px',
            formatter(row, col, cell) {
              return row.job ? row.job.jobTitle : "--"
            },
            align: "center",
          },
          {
            prop: "workId",
            label: "工种",
            minWidth: '80px',
            formatter(row, col, cell) {
              return row.work ? row.work.workName : "--"
            },
            align: "center",
          },
          { prop: "rfid", label: "RFID卡", minWidth: '80px', align: "center", },
          { prop: "accessCardID", label: "门禁ID", minWidth: '80px', align: "center" },
          {
            prop: "status",
            label: "工作状态",
            minWidth: '80px',
            formatter(row, col, cell) {
              return Number(row.status) == 1 ? "在职" : "离职"
            },
            align: "center",
          },
          {
            prop: "faceDetect",
            label: "人脸识别",
            minWidth: '80px',
            formatter(row, col, cell) {
              return row.faceDetect === 1 ? "启用" : "禁用"
            },
            align: "center",
          },
          {
            prop: "faceDetect",
            label: "门禁启用/禁用",
            minWidth: '118px',
            formatter(row, col, cell) {
              return row.isEnable ? "启用" : "禁用"
            },
            align: "center",
          },
          { prop: "comment", label: "备注", align: "center", minWidth: '180px' },
          { label: "操作", custom: "col1", align: "center", minWidth: '108px', fixed: 'right' },
        ],
      }
    },
    methods: {
      resetFormData() { },

      handleSelectionChange(event) {
        this.dataList = event
      },
      selectionChange(value) {
        this.$nextTick(() => {
          let refDom = this.$refs.multipleTable
          this.tableData.forEach(item => {
            value.forEach(edit => {
              if (edit.label && edit.label === item.name) {
                refDom.toggleRowSelection(item, true)
              }
            })
          })
        })
      },
      determineHandler() {
        let ary = []
        this.tableList.forEach(item => {
          let bolen = this.dataList.some(edit => item.label === edit.name)
          if (bolen) {
            ary.push(item)
          }
        })
        this.$emit('setTableCol', ary)
        this.close()
      }
    }
  }
</script>

<style lang="scss" scoped></style>
